<script type="text/javascript">
	$(document).ready(function () {
		var url = "<?php echo base_url(); ?>index.php/player/getallplayer";
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'name' },
                { name: 'team_name' },
                { name: 'no' },
                { name: 'position' },                
                { name: 'gender' },                
                { name: 'age' },
                { name: 'height' },
                { name: 'weight' },
                { name: 'picture' },
                { name: 'birth'}                
                             
			],
            id: 'playerid',
            url: url,
            root: 'data',
            updaterow: function (rowid, rowdata, commit) {
                // synchronize with the server - send update command
                // call commit with parameter true if the synchronization with the server is successful 
                // and with parameter false if the synchronization failed.
                commit(true);
            },
            deleterow: function (rowid, commit) {
                // synchronize with the server - send delete command
                // call commit with parameter true if the synchronization with the server is successful 
                // and with parameter false if the synchronization failed.
                commit(true);
            }
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        var initrowdetails = function (index, parentElement, gridElement, datarecord) {
            var tabsdiv = null;         
            tabsdiv = $($(parentElement).children()[0]);
            if (tabsdiv != null) {
            	profile = tabsdiv.find('#profile_detail');
                offense = tabsdiv.find('#offense_detail');

                var profile_container = $('<div style="margin: 5px;"></div>')
                 var offense_container = $('<div style="margin: 5px;"></div>')
                profile_container.appendTo($(profile));
                
                offense_container.appendTo($(offense));
                
                var photocolumn = $('<div style="float: left; width: 15%;"></div>');
                var leftcolumn = $('<div style="float: left; width: 45%;"></div>');
                var rightcolumn = $('<div style="float: left; width: 40%;"></div>');
                
                profile_container.append(photocolumn);
                profile_container.append(leftcolumn);
                profile_container.append(rightcolumn);
                               
                var photo = $("<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>");
                var image = $("<div style='margin-top: 10px;'></div>");
                var imgurl = '<?php echo base_url(); ?>' + datarecord.picture;
                var img = $('<img height="90" width="80" src="' + imgurl + '"/>');

                image.append(img);
                image.appendTo(photo);
                photocolumn.append(photo);

                var name = "<div style='margin: 10px;'><b>Name:</b> " + datarecord.name + "</div>";
                var gender = "<div style='margin: 10px;'><b>Gender:</b> " + datarecord.gender + "</div>";
                var height = "<div style='margin: 10px;'><b>Height:</b> " + datarecord.height + " cms. </div>";
                var weight = "<div style='margin: 10px;'><b>Weight:</b> " + datarecord.weight + " kgs. </div>";

                $(leftcolumn).append(name);
                $(leftcolumn).append(gender);
                $(leftcolumn).append(height);
                $(leftcolumn).append(weight);
                
                var birth_age = datarecord.birth.split("-");
                var current_age = parseInt(new Date().getFullYear()) - parseInt(birth_age[0]);
                var age = "<div style='margin: 10px;'><b>Age:</b> " + current_age + "</div>";
                var birth = "<div style='margin: 10px;'><b>Birth:</b> " + datarecord.birth + "</div>";
               	var no = "<div style='margin: 10px;'><b>No:</b> " + datarecord.no + "</div>";
                var position = "<div style='margin: 10px;'><b>Position:</b> " + datarecord.position + "</div>";

                $(rightcolumn).append(age);
                $(rightcolumn).append(birth);
                $(rightcolumn).append(no);
                $(rightcolumn).append(position);
               
				//Offense Stat
                var offense_leftcolumn = $('<div style="float: left; width: 45%;"></div>');
                var offense_rightcolumn = $('<div style="float: left; width: 40%;"></div>');
                offense_container.append(offense_leftcolumn);
                offense_container.append(offense_rightcolumn);

                var game = "<div style='margin: 10px;'><b>Games:</b> 0 </div>";
                var avg = "<div style='margin: 10px;'><b>AVG:</b> 0.000 </div>";
                var atbat = "<div style='margin: 10px;'><b>At Bat:</b> 0 </div>";
                var run = "<div style='margin: 10px;'><b>Runs:</b> 0 </div>";
                var hit = "<div style='margin: 10px;'><b>Hits:</b> 0 </div>";
                var bb = "<div style='margin: 10px;'><b>Base On Balls:</b> 0 </div>";
                var hr = "<div style='margin: 10px;'><b>Home Runs:</b> 0 </div>";
                var w = "<div style='margin: 10px;'><b>Wins:</b> 0 </div>";
                var l = "<div style='margin: 10px;'><b>Loses:</b> 0 </div>";
                
                
                $(offense_leftcolumn).append(game);                
                $(offense_leftcolumn).append(avg);
                $(offense_leftcolumn).append(atbat);
                $(offense_leftcolumn).append(run);

                $(offense_rightcolumn).append(w);
                $(offense_rightcolumn).append(l);
                $(offense_rightcolumn).append(hr);
                $(offense_rightcolumn).append(hit);
                $(offense_rightcolumn).append(bb);
                
                                                
            	$(tabsdiv).jqxTabs({ width: 750, height: 180});
            }
        };
        
        $("#mainGrid").jqxGrid(
        {
            width: 1100,
            height: 540,
            source: dataAdapter,
            columnsresize: true,
            pageable: true,
            //autoheight: true,
            sortable: true,
            altrows: true,
            showtoolbar: true,
            groupable: true,
            groupsexpandedbydefault: false,
            showgroupsheader: false,
            rowdetails: true,
            rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li id='profile_header'>Profile</li><li id='offense_header'>Overall Stats.</li></ul><div id='profile_detail'></div><div id='offense_detail'></div></div>", rowdetailsheight: 200 },
            initrowdetails: initrowdetails,
            ready: function () {
                //$("#mainGrid").jqxGrid('showrowdetails', 0);
            },            
            columns: [
              { text: 'Name', dataField: 'name',width: 200 },
              { text: 'Team', dataField: 'team_name',width: 200 },
              { text: 'Gender', dataField: 'gender'},
              { text: 'No', dataField: 'no',type: 'number'},
              { text: 'Position', dataField: 'position'},
                           
			],
			groups: ['team_name'],
			rendertoolbar: function (toolbar) {
                var me = this;
                var container = $("<div style='margin: 5px;'></div>");
                var input = $("<input id='addButton' value='Add' type='button' style='height: 23px; float: right; width: 223px;' />");
                var refresh = $("<input id='refreshButton' value='Refresh' type='button' style='height: 23px; float: right; width: 223px;' />");
                toolbar.append(container);
                container.append(input);
                //container.append(refresh);
                
                //Add data 
                input.on('click', function (event) {
                    window.location = "<?php echo base_url(); ?>index.php/player/createPlayer";
                });

                refresh.on('click', function (event) {
                	$('#mainGrid').jqxGrid('refreshdata');
                });
                
    		}
        });

		var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup'});

		$("#mainGrid").on('contextmenu', function () {
            return false;
        });

		 $("#mainGrid").on('rowclick', function (event) {
             if (event.args.rightclick) {
                 $("#mainGrid").jqxGrid('selectrow', event.args.rowindex);
                 var scrollTop = $(window).scrollTop();
                 var scrollLeft = $(window).scrollLeft();
                 contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                 return false;
             }
         });

		 	// handle context menu clicks.
         	$("#Menu").on('itemclick', function (event) {
             var args = event.args;
             var rowindex = $("#mainGrid").jqxGrid('getselectedrowindex');
             if ($.trim($(args).text()) == "Edit") {
                 editrow = rowindex;
                 // get the clicked row's data and initialize the input fields.
                 var rowid = $("#mainGrid").jqxGrid('getrowid', rowindex);
                 window.location = "<?php echo base_url(); ?>index.php/player/editPlayer?playerid=" + rowid;
                
             }
             else {
                 if(confirm("Do you want to delete?")){
                 	var rowid = $("#mainGrid").jqxGrid('getrowid', rowindex);
                 	url = "<?php echo base_url(); ?>index.php/player/doDelete";

                 	var request = $.ajax({
        				url: url,
        				type: "POST",			
        			    async: false,
        		        dataType: "html",
        		        data: {playerid: rowid}
        			});

        			request.done(function(msg) {				        			
        				alert("Data Deleted");	
        				$("#mainGrid").jqxGrid('deleterow', rowid);	
        			});

        			request.fail(function(jqXHR, textStatus) {
        				alert( "Request failed: " + textStatus );
        			});
                 	
                 }
             }
        	 }); 

		});
	</script>

<div style="font-size: 13px; font-family: Verdana; float: left;">
	<div id="mainGrid"></div>
</div>

<div id='Menu'>
	<ul>
		<li>Edit</li>
		<li>Delete</li>
	</ul>
</div>

